<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>腕带发放</title>
		<link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/layui.css}" />
	<script type="text/jscript" th:src="@{/plugin/layui/layui.js}" charset="UTF-8"></script>
		<script type="text/jscript" th:src="@{/plugin/jquery.min.js}"></script>
<script>
//营业时间

function showTime() {
 var	nowtime = new Date();
 var	year = nowtime.getFullYear();
 var	month = nowtime.getMonth() + 1;
 var	date = nowtime.getDate();
	$("#mytime").html(year + "年" + month + "月" + date +"日");
	$("#mytime2").html("营业时间：" +nowtime.toLocaleTimeString());
};

$(function(){

setInterval("showTime()", 1000);


})
		
		
		<!--读取腕带信息-->
		$(function(){
			
			$("#read").mousedown(function(){
				$("#read").css("font-size","15px");
				
			});
			$("#read").mouseup(function(){
				$("#read").css("font-size","20px");
				var va=$("#idnum").val();
				
				
				//发送ajax请求从仓库中获取腕带类型
				$.post( "[[@{/gettype}]]",
						{wriststrap_id : va},
						function(data){
							if(data.state==0){	
								$("#op").text('闲置状态') ; return;
							}
							if(data.state==1){	
								$("#op").text('使用状态');return;
							}
							if(data.state==2){	
								$("#op").text('挂失状态');return;
							}
							alert("腕带信息不存在！");return;
						});	
				
			});
		})
		
		<!-- 根据充值金额计算余额   -->
		
			function amountchange(){
			
				var account=$("#amount").val();
				var account=account-10;
				if(account>0){
					$("#realamount").val(account);return;
				}
				$("#realamount").val("");
		}

			<!--重置金额 -->
		function reset(){
			var amount=$("#amount").val("");amountchange();
		}
		<!--退格-->
		function backspace(){
			var amount=$("#amount").val();
			if(amount!=""){
			var temp=amount.length;
			temp=amount.substring(0,temp-1);
			var amount=$("#amount").val(temp);amountchange();
			}
			
		}
		
		<!-- 输入确定金额 -->
		function clickNumber(num){
			var amount=$("#amount").val();
			if(amount==""){
				$("#amount").val(num);amountchange();
			}else{
				num=parseInt(num)+parseInt(amount);
				$("#amount").val(num+"");amountchange();
			}
		}
		<!-- 输入键盘-->
		function clickNumber1(num){
			var amount=$("#amount").val();
			if(amount==""){
				$("#amount").val(num);
				amountchange();
			}else{
				num=parseInt(num)+parseInt(amount)*10;
				$("#amount").val(num);
				
				amountchange();
			}
		}
		<!-- 模拟按键功能，点击div变小-->
		function dosome(num){
			var id="key"+num;
			if(id=="key13"){
				document.getElementById(id).style="font-size: 20px; background-color: #01AAED;width: 90%; height: 90%; margin: auto;";return;
			}else if(id=="key15"){
								document.getElementById(id).style="font-size: 20px; background-color: orange;width: 90%; height: 90%; margin: auto;";return;
			}else if(id=="key17"){
								document.getElementById(id).style="font-size: 20px; background-color: #ff0000;width: 90%; height: 90%; margin: auto;";return;
			};
			document.getElementById(id).style="font-size: 20px; background-color: #0000FF;width: 90%; height: 90%; margin: auto;";
		}
		function dother(num){
				var id="key"+num;
				if(id=="key13"){
					document.getElementById(id).style="font-size: 25px; background-color: #01AAED;width: 100%; height: 100%; margin: auto;";return;
				}else if(id=="key15"){
				document.getElementById(id).style="font-size: 25px; background-color: orange;width: 100%; height: 100%; margin: auto;";return;
				}else if(id=="key17"){
				document.getElementById(id).style="font-size: 25px; background-color: #ff0000;width: 100%; height: 100%; margin: auto;";return;
				
				
				}else if(id=="key16"){
					document.getElementById(id).style="font-size: 25px; background-color: #0000FF;width: 100%; height: 100%; margin: auto;";
					//验证腕带编号是否为空
					if($("#idnum").val()==""){
						alert("腕带信息不能为空");return;
					}
					
					//判断该腕带是否是闲置状态
					if(($("#op").text())=="闲置状态"){
					
					//判断是否填写用户信息
						if($("#tel").val()=="" || $("#username").val()==""){
							
							alert("用户信息不能为空！");return;
						}
					//充值金额不能为空
						if($("#amount").val()==""){
							alert("充值金额不能为空");return;
						}
						
						if($("#amount").val()<100){
							alert("充值金额不能低于100");return;
						}
						
						//提交数据到前台
						//发送请求创建腕带，成功就跳转充值页面。
						if(confirm("是否生成新的腕带信息")==true){
							
							$.post("[[@{/crateWristStrap}]]",
									{
								wriststrp_id : $("#idnum").val(),
								balance : 0,
								"customer.tel" : $("#tel").val(),
								"customer.customer_name" : $("#username").val()	
									},
								function(data){
							
							//如果新增腕带信息成功则跳转支付页面，传递info_id和充值金额
						if( data!="" ){
							
							if(confirm("恭喜腕带创建成功!是否跳转充值页面  ")==true){
								location.href="[[@{/pay?info_id=}]]"+data.info_id+"&amount="+$("#amount").val()+"&wid="+data.wriststrp_id; 
								return;//跳转支付页面 
							}
							
							}
						alert("新增腕带信息失败！");
									}	
							)
							
						}
					
					}else{
						alert("该腕带不是闲置状态，不能创建");
					}
				}
			document.getElementById(id).style="font-size: 25px; background-color: #0000FF;width: 100%; height: 100%; margin: auto;";
		}
		</script>
</head>
<body>
	<!--最外层容器控制位置-->
	<div id="" class="container" style="height: 500px; margin: 30px 100px;">
		<div id="" class="layui-row ">

			<!--  左边操作功能模块-->
			<div id="" class="layui-col-md12 layui-bg-gray"
				style="height: 500px;">
				<div id="" class="layui-row ">
					<!-- 左侧菜单框-->
					<div id="" class="layui-col-md8 " style="height: 500px;">
						<!-- 印刷号 -->
						<div id="" class="layui-col-md12"
							style="border: #40AFFE 2px solid; background-color: white; height: 70px;">
							<div id="" class="layui-col-md5"
								style="height: 70px; text-align: center; line-height: 70px; font-size: 20px; color: red;">
								印&nbsp;刷&nbsp;号：<input id="idnum" type="text" size="10"
									; style="color: red;" />
							</div>

							<div id="read" class="layui-col-md2 layui-bg-blue"
								style="height: 70px; text-align: center; line-height: 70px; font-size: 20px;">
								读取腕带</div>

							<div id="" class="layui-col-md5"
								style="height: 70px; text-align: center; line-height: 70px; font-size: 20px;">
								腕带状态： <select id="type">
									<option id="op">读取腕带</option>
								</select>
							</div>
						</div>
						<!-- 客户信息 -->
						<div id="" class="layui-col-md12"
							style="border: #40AFFE 2px solid; margin-top: 5px; background-color: white; height: 70px;">
							<div id="" class="layui-col-md5"
								style="height: 70px; text-align: center; line-height: 70px; font-size: 20px;">
								电话号码：<input type="text" id="tel" size="10" ; />
							</div>
							<div id="" class="layui-col-md7"
								style="height: 70px; text-align: center; line-height: 70px; font-size: 20px;">
								用&nbsp;户&nbsp;姓&nbsp;名：<input id="username" type="text"
									size="10" ; style="color: red;" />
							</div>
						</div>
						<!-- 消费项目列表 -->
						<div id="" class="layui-col-md12"
							style="margin-top: 5px; background-color: #93D1FF; font-size: 20px; height: 30px;">
							&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-list"
								style="font-size: 20px;"></i>消费项目列表
						</div>
						<div id="" class="layui-col-md12">
							<table border="1px" bordercolor="#f2f2f2" width="100%">
								<tr bgcolor="#007DDB">
									<td class="layui-col-md4"
										style="height: 30px; text-align: center; line-height: 30px;">项目名称</td>
									<td class="layui-col-md4"
										style="height: 30px; text-align: center; line-height: 30px;">项目金额</td>
									<td class="layui-col-md4"
										style="height: 30px; text-align: center; line-height: 30px;">操作类型</td>
								</tr>
								<tr>
									<td class="layui-col-md4"
										style="height: 30px; text-align: center; line-height: 30px;">腕带押金</td>
									<td class="layui-col-md4"
										style="height: 30px; text-align: center; line-height: 30px;">-10</td>
									<td class="layui-col-md4"
										style="height: 30px; text-align: center; line-height: 30px;">押金</td>
								</tr>

							</table>
						</div>
					</div>

					<!-- 右侧菜单-->
					<div id="" class="layui-col-md4" style="height: 500px;">
						<div id="" class="layui-col-md12"
							style="background-color: #93D1FF; height: 140px; text-align: center; margin: 5px;">
							<div id="" style="font-size: 20px; margin-top: 20px;">
								充值金额：<input type="text" id="amount" size="7" />(元)
							</div>
							<div id="" style="font-size: 20px; margin-top: 15px;">
								可用余额：<input id="realamount" type="text" size="7" />(元)
							</div>
						</div>
						<div id="" class="layui-col-md12 layui-col-space5"
							style="margin: 5px;">
							<div id="" class="layui-col-md4">
								<div id=""
									style="text-align: center; line-height: 50px; height: 50px;">
									<div id="key1" onmousedown="dosome(1)"
										onclick="clickNumber(500)" onmouseup="dother(1)"
										style="background-color: #0000FF; font-size: 25px; width: 100%; height: 100%; margin: auto;">
										<font color="white">500元</font>
									</div>
								</div>
							</div>
							<div id="" class="layui-col-md4">
								<div id=""
									style="text-align: center; line-height: 50px; height: 50px;">
									<div id="key2" onmousedown="dosome(2)"
										onclick="clickNumber(100)" onmouseup="dother(2)"
										style="background-color: #0000FF; font-size: 25px; width: 100%; height: 100%; margin: auto;">
										<font color="white">100元</font>
									</div>
								</div>
							</div>
							<div id="" class="layui-col-md4">
								<div id=""
									style="text-align: center; line-height: 50px; height: 50px;">
									<div id="key3" onmousedown="dosome(3)"
										onclick="clickNumber(100)" onmouseup="dother(3)"
										style="background-color: #0000FF; font-size: 25px; width: 100%; height: 100%; margin: auto;">
										<font color="white">200元</font>
									</div>
								</div>
							</div>
							<div id="" class="layui-col-md4">
								<div id=""
									style="text-align: center; line-height: 50px; height: 50px;">
									<div id="key4" onmousedown="dosome(4)"
										onclick="clickNumber1(7)" onmouseup="dother(4)"
										style="background-color: #0000FF; font-size: 25px; width: 100%; height: 100%; margin: auto;">
										<font color="white">7</font>
									</div>
								</div>
							</div>
							<div id="" class="layui-col-md4">
								<div id=""
									style="text-align: center; line-height: 50px; height: 50px;">
									<div id="key5" onmousedown="dosome(5)"
										onclick="clickNumber1(8)" onmouseup="dother(5)"
										style="background-color: #0000FF; font-size: 25px; width: 100%; height: 100%; margin: auto;">
										<font color="white">8</font>
									</div>
								</div>
							</div>
							<div id="" class="layui-col-md4">
								<div id=""
									style="text-align: center; line-height: 50px; height: 50px;">
									<div id="key6" onmousedown="dosome(6)"
										onclick="clickNumber1(9)" onmouseup="dother(6)"
										style="background-color: #0000FF; font-size: 25px; width: 100%; height: 100%; margin: auto;">
										<font color="white">9</font>
									</div>
								</div>
							</div>
							<div id="" class="layui-col-md4">
								<div id=""
									style="text-align: center; line-height: 50px; height: 50px;">
									<div id="key7" onmousedown="dosome(7)"
										onclick="clickNumber1(4)" onmouseup="dother(7)"
										style="background-color: #0000FF; font-size: 25px; width: 100%; height: 100%; margin: auto;">
										<font color="white">4</font>
									</div>
								</div>
							</div>
							<div id="" class="layui-col-md4">
								<div id=""
									style="text-align: center; line-height: 50px; height: 50px;">
									<div id="key8" onmousedown="dosome(8)"
										onclick="clickNumber1(5)" onmouseup="dother(8)"
										style="background-color: #0000FF; font-size: 25px; width: 100%; height: 100%; margin: auto;">
										<font color="white">5</font>
									</div>
								</div>
							</div>
							<div id="" class="layui-col-md4">
								<div id=""
									style="text-align: center; line-height: 50px; height: 50px;">
									<div id="key9" onmousedown="dosome(9)"
										onclick="clickNumber1(6)" onmouseup="dother(9)"
										style="background-color: #0000FF; font-size: 25px; width: 100%; height: 100%; margin: auto;">
										<font color="white">6</font>
									</div>
								</div>
							</div>
							<div id="" class="layui-col-md4">
								<div id=""
									style="text-align: center; line-height: 50px; height: 50px;">
									<div id="key10" onmousedown="dosome(10)"
										onclick="clickNumber1(1)" onmouseup="dother(10)"
										style="background-color: #0000FF; font-size: 25px; width: 100%; height: 100%; margin: auto;">
										<font color="white">1</font>
									</div>
								</div>
							</div>
							<div id="" class="layui-col-md4">
								<div id=""
									style="text-align: center; line-height: 50px; height: 50px;">
									<div id="key11" onmousedown="dosome(11)"
										onclick="clickNumber1(2)" onmouseup="dother(11)"
										style="background-color: #0000FF; font-size: 25px; width: 100%; height: 100%; margin: auto;">
										<font color="white">2</font>
									</div>
								</div>
							</div>
							<div id="" class="layui-col-md4">
								<div id=""
									style="text-align: center; line-height: 50px; height: 50px;">
									<div id="key12" onmousedown="dosome(12)"
										onclick="clickNumber1(3)" onmouseup="dother(12)"
										style="background-color: #0000FF; font-size: 25px; width: 100%; height: 100%; margin: auto;">
										<font color="white">3</font>
									</div>
								</div>
							</div>
							<div id="" class="layui-col-md4">
								<div id=""
									style="text-align: center; line-height: 50px; height: 50px;">
									<div id="key13" onclick="backspace()" onmousedown="dosome(13)"
										onmouseup="dother(13)"
										style="background-color: #01AAED; font-size: 25px; width: 100%; height: 100%; margin: auto;">
										<font color="white"><i
											class="layui-icon layui-icon-return" style="font-size: 25px;"></i>退格</font>
									</div>
								</div>
							</div>

							<div id="" class="layui-col-md4">
								<div id=""
									style="text-align: center; line-height: 50px; height: 50px;">
									<div id="key14" onmousedown="dosome(14)"
										onclick="clickNumber1(0)" onmouseup="dother(14)"
										style="background-color: #0000FF; font-size: 25px; width: 100%; height: 100%; margin: auto;">
										<font color="white">0</font>
									</div>
								</div>
							</div>
							<div id="" class="layui-col-md4">
								<div id=""
									style="text-align: center; line-height: 50px; height: 50px;">
									<div id="key15" onclick="reset()" onmousedown="dosome(15)"
										onmouseup="dother(15)"
										style="background-color: orange; font-size: 25px; width: 100%; height: 100%; margin: auto;">
										<font color="white"><i
											class="layui-icon layui-icon-refresh-3"
											style="font-size: 25px;"></i>重置</font>
									</div>
								</div>
							</div>
							<div id="" class="layui-col-md6">
								<div id=""
									style="text-align: center; line-height: 50px; height: 50px;">
									<div id="key16" onmousedown="dosome(16)" onmouseup="dother(16)"
										style="background-color: #0000FF; font-size: 25px; width: 100%; height: 100%; margin: auto;">
										<font color="white"> <i
											class="layui-icon layui-icon-release"
											style="font-size: 20px;"></i>发放
										</font>
									</div>
								</div>
							</div>
							<div id="" class="layui-col-md6">
								<div id=""
									style="text-align: center; line-height: 50px; height: 50px;">
									<div id="key17" onmousedown="dosome(17)" onmouseup="dother(17)"
										style="background-color: #FF0000; font-size: 25px; width: 100%; height: 100%; margin: auto;">
										<font color="white"><i
											class="layui-icon layui-icon-close" style="font-size: 25px;"></i>关闭</font>
									</div>
								</div>
							</div>

							</table>
						</div>
					</div>


				</div>
			</div>
				<!-- 页脚-->
				<div class="layui-row layui-bg-gray" style="text-align: center;">
					<div id="mytime" class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"> </div>
					<div class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"> 操作用户：yanhui</div>
					<div id="mytime2"  class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"></div>
					<div class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"> 某某游乐园</div>
				</div>
		</div>

	</div>
	<script type="text/javascript">

</script>
</body>
</html>
